<template>
  <div>
    <a-alert type="warning" show-icon style="margin-bottom: 18px">
      <template #description>
        提供微信公众号系列对接接口及功能，无需对接微信SDK，专注业务开发。
        <a
          href="https://doc.21ds.cn/detail?doc=4731341806141859/4754829305025199"
          target="_blank"
          rel="noopener noreferrer"
          >对接文档</a
        >
      </template>
    </a-alert>
    <div class="table-page-search-wrapper">
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="16">
          <a-form layout="inline" :model="listQuery">
            <a-form-item label="搜索项">
              <a-input v-model:value="listQuery.title" placeholder="输入名称/AppId搜索..." />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="searchSubmit"> 搜索 </a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="8">
          <div style="margin-right: 0px; float: right; display: flex; align-item: center">
            <a-tooltip placement="top">
              <template #title>
                <span>刷新列表</span>
              </template>
              <a-button @click="reloadList">
                <template #icon>
                  <SyncOutlined />
                </template>
              </a-button>
            </a-tooltip>
            <a-button
              v-permission="{ action: 'mpweixin_add' }"
              type="primary"
              style="margin-left: 12px"
              @click="mpweixin_add"
            >
              <template #icon>
                <PlusOutlined />
              </template>
              新增公众号
            </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-table
      :columns="columns"
      :rowKey="(record) => record._id"
      :dataSource="dataList.data"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #status="{ text: record }">
        <a-tag v-if="record == '1'" color="green">启用</a-tag>
        <a-tag v-if="record == '0'" color="red">禁用</a-tag>
      </template>
      <template #action="{ text: record }">
        <a v-permission="{ action: 'mpweixin_add' }" @click="mpweixin_edit(record)">
          <EditOutlined /> 编辑
        </a>
        <a-divider v-permission="{ action: 'mpweixin_auto_reply' }" type="vertical" />
        <a v-permission="{ action: 'mpweixin_auto_reply' }" @click="mpweixin_auto_reply(record)">
          自动回复
        </a>
        <a-divider v-permission="{ action: 'mpweixin_media' }" type="vertical" />
        <a v-permission="{ action: 'mpweixin_media' }" @click="mpweixin_media(record)"> 素材 </a>
        <a-divider v-permission="{ action: 'mpweixin_menu' }" type="vertical" />
        <a v-permission="{ action: 'mpweixin_menu' }" @click="mpweixin_menu(record)"> 菜单 </a>
        <a-divider v-permission="{ action: 'mpweixin_oauth' }" type="vertical" />
        <a v-permission="{ action: 'mpweixin_oauth' }" @click="mpweixin_oauth(record)">
          网页授权
        </a>
        <a-divider v-permission="{ action: 'mpweixin_del' }" type="vertical" />
        <a
          v-permission="{ action: 'mpweixin_del' }"
          style="color: red"
          @click="mpweixin_delete(record)"
        >
          <DeleteOutlined /> 删除
        </a>
      </template>
    </a-table>
    <a-drawer
      width="70%"
      title="自动回复"
      placement="right"
      :open="replyDrawerShow"
      @close="
        () => {
          replyDrawerShow = false
        }
      "
    >
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" v-permission="{ action: 'mpweixin_keyword_reply' }" tab="关键词回复">
          <div class="table-page-search-wrapper">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="16">
                <a-form layout="inline" :model="listQueryKeyword">
                  <a-form-item label="搜索项">
                    <a-input
                      v-model:value="listQueryKeyword.title"
                      placeholder="输入关键字搜索..."
                    />
                  </a-form-item>
                  <a-form-item>
                    <a-button type="primary" @click="searchSubmitKeyword"> 搜索 </a-button>
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col :span="8">
                <div style="margin-right: 0px; float: right; display: flex; align-item: center">
                  <a-tooltip placement="top">
                    <template #title>
                      <span>刷新列表</span>
                    </template>
                    <a-button @click="reloadListKeyword">
                      <template #icon>
                        <SyncOutlined />
                      </template>
                    </a-button>
                  </a-tooltip>
                  <a-button
                    v-permission="{ action: 'mpweixin_keyword_add' }"
                    type="primary"
                    style="margin-left: 12px"
                    @click="mpweixin_keyword_add"
                  >
                    <template #icon>
                      <PlusOutlined />
                    </template>
                    新增关键字
                  </a-button>
                </div>
              </a-col>
            </a-row>
          </div>
          <a-table
            :columns="columnsKeyword"
            :rowKey="(record) => record._id"
            :dataSource="keywordDataList.data"
            :loading="keywordLoading"
            :pagination="keywordPagination"
            @change="handleTableChangeKeyword"
          >
            <template #content="{ text: record }">
              <a-tooltip v-if="record.type != 'tuwen'">
                <template #title>{{ record.content }}</template>
                <div
                  style="
                    width: 160px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    height: 20px;
                    white-space: nowrap;
                  "
                >
                  {{ record.content }}
                </div>
              </a-tooltip>
              <a-tooltip v-if="record.type == 'tuwen'">
                <template #title>
                  <a :href="record.reply_url" target="_blank" rel="noopener noreferrer">{{
                    record.reply_title
                  }}</a>
                </template>
                <a-tag color="cyan">图文</a-tag>
              </a-tooltip>
            </template>
            <template #content_type="{ text: record }">
              <a-tag v-if="record == 'api'" color="cyan">API</a-tag>
              <a-tag v-else color="blue">固定</a-tag>
            </template>
            <template #keyword_arr="{ text: record }">
              <a-tag v-for="(tag, index) in record" :key="index" color="green">{{ tag }}</a-tag>
            </template>
            <template #action="{ text: record }">
              <a
                v-permission="{ action: 'mpweixin_keyword_add' }"
                @click="mpweixin_keyword_edit(record)"
              >
                <EditOutlined /> 编辑
              </a>
              <a-divider v-permission="{ action: 'mpweixin_keyword_del' }" type="vertical" />
              <a
                v-permission="{ action: 'mpweixin_keyword_del' }"
                style="color: red"
                @click="mpweixin_keyword_delete(record)"
              >
                <DeleteOutlined /> 删除
              </a>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" v-permission="{ action: 'mpweixin_sub_reply' }" tab="被关注回复">
          <div class="table-page-search-wrapper">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="16">
                <a-form layout="inline" :model="listQuerySub">
                  <a-form-item label="搜索项">
                    <a-input v-model:value="listQuerySub.title" placeholder="输入回复内容搜索..." />
                  </a-form-item>
                  <a-form-item>
                    <a-button type="primary" @click="searchSubmitSub"> 搜索 </a-button>
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col :span="8">
                <div style="margin-right: 0px; float: right; display: flex; align-item: center">
                  <a-tooltip placement="top">
                    <template #title>
                      <span>刷新列表</span>
                    </template>
                    <a-button @click="reloadListSub">
                      <template #icon>
                        <SyncOutlined />
                      </template>
                    </a-button>
                  </a-tooltip>
                  <a-button
                    v-permission="{ action: 'mpweixin_sub_add' }"
                    type="primary"
                    style="margin-left: 12px"
                    @click="mpweixin_sub_add"
                  >
                    <template #icon>
                      <PlusOutlined />
                    </template>
                    新增关注回复
                  </a-button>
                </div>
              </a-col>
            </a-row>
          </div>
          <a-table
            :columns="columnsSub"
            :rowKey="(record) => record._id"
            :dataSource="subDataList.data"
            :loading="subLoading"
            :pagination="subPagination"
            @change="handleTableChangeSub"
          >
            <template #content="{ text: record }">
              <a-tooltip v-if="record.type != 'tuwen'">
                <template #title>{{ record.content }}</template>
                <div
                  style="
                    width: 160px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    height: 20px;
                    white-space: nowrap;
                  "
                >
                  {{ record.content }}
                </div>
              </a-tooltip>
              <a-tooltip v-if="record.type == 'tuwen'">
                <template #title>
                  <a :href="record.reply_url" target="_blank" rel="noopener noreferrer">{{
                    record.reply_title
                  }}</a>
                </template>
                <a-tag color="cyan">图文</a-tag>
              </a-tooltip>
            </template>
            <template #content_type="{ text: record }">
              <a-tag v-if="record == 'api'" color="cyan">API</a-tag>
              <a-tag v-else color="blue">固定</a-tag>
            </template>
            <template #is_use="{ text: record }">
              <a-tag v-if="record.is_use == 1" color="blue">已启用</a-tag>
              <a-tag v-else @click="useReply(record)">未启用</a-tag>
            </template>
            <template #action="{ text: record }">
              <a v-permission="{ action: 'mpweixin_sub_add' }" @click="mpweixin_sub_edit(record)">
                <EditOutlined /> 编辑
              </a>
              <a-divider v-permission="{ action: 'mpweixin_sub_del' }" type="vertical" />
              <a
                v-permission="{ action: 'mpweixin_sub_del' }"
                style="color: red"
                @click="mpweixin_sub_delete(record)"
              >
                <DeleteOutlined /> 删除
              </a>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" tab="导购转链">
          <div class="table-page-search-wrapper">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="16">
                <a-form layout="inline" :model="listQuerySub">
                  <a-form-item label="搜索项">
                    <a-input v-model:value="listQuerySub.title" placeholder="输入名称搜索..." />
                  </a-form-item>
                  <a-form-item>
                    <a-button type="primary" @click="searchSubmitSub"> 搜索 </a-button>
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col :span="8">
                <div style="margin-right: 0px; float: right; display: flex; align-item: center">
                  <a-tooltip placement="top">
                    <template #title>
                      <span>刷新列表</span>
                    </template>
                    <a-button @click="reloadListDg">
                      <template #icon>
                        <SyncOutlined />
                      </template>
                    </a-button>
                  </a-tooltip>
                  <a-button
                    v-permission="{ action: 'mpweixin_dg_add' }"
                    type="primary"
                    style="margin-left: 12px"
                    @click="mpweixin_dg_add"
                  >
                    <template #icon>
                      <PlusOutlined />
                    </template>
                    新增
                  </a-button>
                </div>
              </a-col>
            </a-row>
          </div>
          <a-table
            :columns="columnsDg"
            :rowKey="(record) => record._id"
            :dataSource="dgDataList.data"
            :loading="dgLoading"
            :pagination="dgPagination"
            @change="handleTableChangeDg"
          >
            <template #content="{ text: record }">
              <a-tag v-if="record.type == 'tuwen'" color="cyan">图文</a-tag>
              <a-tag v-if="record.type == 'pic'" color="orange">图片</a-tag>
              <a-tag v-if="record.type == 'text'">文本</a-tag>
            </template>
            <template #content_type="{ text: record }">
              <a-tag v-if="record == 'api'" color="cyan">API</a-tag>
              <a-tag v-else color="blue">柠聚开发平台(喵有券)</a-tag>
            </template>
            <template #is_use="{ text: record }">
              <a-tag v-if="record.is_use == 1" color="blue">已启用</a-tag>
              <a-tag v-else @click="useReplyDg(record)">未启用</a-tag>
            </template>
            <template #action="{ text: record }">
              <a v-permission="{ action: 'mpweixin_dg_add' }" @click="mpweixin_dg_edit(record)">
                <EditOutlined /> 编辑
              </a>
              <a-divider v-permission="{ action: 'mpweixin_dg_del' }" type="vertical" />
              <a
                v-permission="{ action: 'mpweixin_dg_del' }"
                style="color: red"
                @click="mpweixin_dg_delete(record)"
              >
                <DeleteOutlined /> 删除
              </a>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
      <a-drawer
        width="50%"
        title="关键字详情"
        placement="right"
        :open="keywordDrawerShow"
        @close="
          () => {
            keywordDrawerShow = false
          }
        "
      >
        <template #extra>
          <a-button
            style="margin-right: 8px"
            @click="
              () => {
                keywordDrawerShow = false
              }
            "
            >取消</a-button
          >
          <a-button type="primary" @click="addItemKeyword">提交</a-button>
        </template>
        <a-form
          ref="formRefKeyword"
          :model="FormStateKeyword"
          :rules="FormRuleKeyword"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-form-item label="名称" has-feedback required name="title">
            <a-input v-model:value="FormStateKeyword.title" placeholder="请输入名称" />
          </a-form-item>
          <a-form-item has-feedback required label="关键字">
            <a-select
              v-model:value="FormStateKeyword.keyword_arr"
              mode="tags"
              style="width: 100%"
              :token-separators="[',', ' ']"
              placeholder="请输入关键字，多个以,或者空格分隔"
            />
          </a-form-item>
          <a-form-item has-feedback required label="请选择回复类别">
            <a-radio-group v-model:value="FormStateKeyword.type" name="type">
              <a-radio key="text" value="text">文本</a-radio>
              <a-radio key="pic" value="pic">图片</a-radio>
              <a-radio key="yinpin" value="yinpin">音频</a-radio>
              <a-radio key="video" value="video">视频</a-radio>
              <a-radio key="tuwen" value="tuwen">图文</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item has-feedback required label="是否需要二次回复">
            <a-radio-group v-model:value="FormStateKeyword.need_sec_reply" name="need_sec_reply">
              <a-radio key="0" value="0">不需要</a-radio>
              <a-radio key="1" value="1">需要</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-if="FormStateKeyword.need_sec_reply == '1'" required label="二次回复提示">
            <a-textarea
              v-model:value="FormStateKeyword.need_sec_msg"
              placeholder="请输入，如:请输入xx以查询"
            />
          </a-form-item>
          <a-form-item has-feedback required label="回复内容来源">
            <a-radio-group v-model:value="FormStateKeyword.content_type" name="content_type">
              <a-radio key="text" value="text">固定内容</a-radio>
              <a-radio key="api" value="api">API获取</a-radio>
            </a-radio-group>
            <a-tooltip placement="top">
              <template #title>
                <span>查看区别及使用方式</span>
              </template>
              <a
                href="http://doc.21ds.cn/detail?doc=4731341806141859/4754829528050107"
                target="_blank"
                rel="noopener noreferrer"
                title="查看区别及使用方式"
                style="margin-left: 5px"
              >
                <question-circle-outlined />
              </a>
            </a-tooltip>
          </a-form-item>
          <a-form-item
            v-if="FormStateKeyword.type == 'pic' && FormStateKeyword.content_type == 'text'"
            label="选择素材"
          >
            <a-button
              type="primary"
              @click="
                () => {
                  selectMediaModalShow = true
                  listQueryMedia.mw_id = FormStateKeyword.mw_id
                  FormStateMedia.mw_id = FormStateKeyword.mw_id
                  listQueryMedia.pageNo = 1
                  getMediaList()
                }
              "
              >选择素材</a-button
            >
          </a-form-item>
          <a-form-item
            v-if="FormStateKeyword.type == 'video' && FormStateKeyword.content_type == 'text'"
            has-feedback
            required
            label="视频标题"
          >
            <a-input v-model:value="FormStateKeyword.reply_title" placeholder="请输入视频标题" />
          </a-form-item>
          <a-form-item
            v-if="FormStateKeyword.type == 'tuwen' && FormStateKeyword.content_type == 'text'"
            has-feedback
            required
            label="图文标题"
          >
            <a-input v-model:value="FormStateKeyword.reply_title" placeholder="请输入图文标题" />
          </a-form-item>
          <a-form-item
            v-if="FormStateKeyword.type == 'tuwen' && FormStateKeyword.content_type == 'text'"
            has-feedback
            required
            label="图文封面图"
          >
            <a-input
              v-model:value="FormStateKeyword.reply_pic"
              placeholder="请输入图文封面图地址"
            />
          </a-form-item>
          <a-form-item
            v-if="FormStateKeyword.type == 'tuwen' && FormStateKeyword.content_type == 'text'"
            has-feedback
            required
            label="图文描述"
          >
            <a-input v-model:value="FormStateKeyword.reply_desc" placeholder="请输入图文描述" />
          </a-form-item>
          <a-form-item
            v-if="FormStateKeyword.type == 'tuwen' && FormStateKeyword.content_type == 'text'"
            has-feedback
            required
            label="图文链接"
          >
            <a-input v-model:value="FormStateKeyword.reply_url" placeholder="请输入图文链接" />
          </a-form-item>
          <a-form-item
            v-if="FormStateKeyword.type != 'tuwen' || FormStateKeyword.content_type == 'api'"
            has-feedback
            required
            :label="FormStateKeyword.content_type == 'api' ? 'API接口地址' : '回复内容(媒体ID)'"
          >
            <a-textarea
              v-if="FormStateKeyword.content_type == 'api'"
              v-model:value="FormStateKeyword.content"
              show-count
              placeholder="请输入API接口地址"
            />
            <a-textarea
              v-else
              v-model:value="FormStateKeyword.content"
              show-count
              placeholder="请输入回复内容(媒体ID)"
              :rows="6"
            />
          </a-form-item>
        </a-form>
      </a-drawer>
      <a-drawer
        width="50%"
        title="被关注回复详情"
        placement="right"
        :open="subDrawerShow"
        @close="
          () => {
            subDrawerShow = false
          }
        "
      >
        <template #extra>
          <a-button
            style="margin-right: 8px"
            @click="
              () => {
                subDrawerShow = false
              }
            "
            >取消</a-button
          >
          <a-button type="primary" @click="addItemSub">提交</a-button>
        </template>
        <a-form
          ref="formRefSub"
          :model="FormStateSub"
          :rules="FormRuleSub"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-form-item label="名称" has-feedback required name="title">
            <a-input v-model:value="FormStateSub.title" placeholder="请输入名称" />
          </a-form-item>
          <a-form-item has-feedback required label="请选择回复类别">
            <a-radio-group v-model:value="FormStateSub.type" name="type">
              <a-radio key="text" value="text">文本</a-radio>
              <a-radio key="pic" value="pic">图片</a-radio>
              <a-radio key="yinpin" value="yinpin">音频</a-radio>
              <a-radio key="video" value="video">视频</a-radio>
              <a-radio key="tuwen" value="tuwen">图文</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item has-feedback required label="回复内容来源">
            <a-radio-group v-model:value="FormStateSub.content_type" name="content_type">
              <a-radio key="text" value="text">固定内容</a-radio>
              <a-radio key="api" value="api">API获取</a-radio>
            </a-radio-group>
            <a-tooltip placement="top">
              <template #title>
                <span>查看区别及使用方式</span>
              </template>
              <a
                href="http://doc.21ds.cn/detail?doc=4731341806141859/4754829528050107"
                target="_blank"
                rel="noopener noreferrer"
                title="查看区别及使用方式"
                style="margin-left: 5px"
              >
                <question-circle-outlined />
              </a>
            </a-tooltip>
          </a-form-item>
          <a-form-item
            v-if="FormStateSub.type == 'pic' && FormStateSub.content_type == 'text'"
            label="选择素材"
          >
            <a-button
              type="primary"
              @click="
                () => {
                  selectMediaModalShow = true
                  listQueryMedia.mw_id = FormStateSub.mw_id
                  FormStateMedia.mw_id = FormStateSub.mw_id
                  listQueryMedia.pageNo = 1
                  getMediaList()
                }
              "
              >选择素材</a-button
            >
          </a-form-item>
          <a-form-item
            v-if="FormStateSub.type == 'video' && FormStateSub.content_type == 'text'"
            has-feedback
            required
            label="视频标题"
          >
            <a-input v-model:value="FormStateSub.reply_title" placeholder="请输入视频标题" />
          </a-form-item>
          <a-form-item
            v-if="FormStateSub.type == 'tuwen' && FormStateSub.content_type == 'text'"
            has-feedback
            required
            label="图文标题"
          >
            <a-input v-model:value="FormStateSub.reply_title" placeholder="请输入图文标题" />
          </a-form-item>
          <a-form-item
            v-if="FormStateSub.type == 'tuwen' && FormStateSub.content_type == 'text'"
            has-feedback
            required
            label="图文封面图"
          >
            <a-input v-model:value="FormStateSub.reply_pic" placeholder="请输入图文封面图地址" />
          </a-form-item>
          <a-form-item
            v-if="FormStateSub.type == 'tuwen' && FormStateSub.content_type == 'text'"
            has-feedback
            required
            label="图文描述"
          >
            <a-input v-model:value="FormStateSub.reply_desc" placeholder="请输入图文描述" />
          </a-form-item>
          <a-form-item
            v-if="FormStateSub.type == 'tuwen' && FormStateSub.content_type == 'text'"
            has-feedback
            required
            label="图文链接"
          >
            <a-input v-model:value="FormStateSub.reply_url" placeholder="请输入图文链接" />
          </a-form-item>
          <a-form-item
            v-if="FormStateSub.type != 'tuwen' || FormStateSub.content_type == 'api'"
            has-feedback
            required
            :label="FormStateSub.content_type == 'api' ? 'API接口地址' : '回复内容(媒体ID)'"
          >
            <a-textarea
              v-if="FormStateSub.content_type == 'api'"
              v-model:value="FormStateSub.content"
              show-count
              placeholder="请输入API接口地址"
            />
            <a-textarea
              v-else
              v-model:value="FormStateSub.content"
              show-count
              placeholder="请输入回复内容(媒体ID)"
            />
          </a-form-item>
        </a-form>
      </a-drawer>
      <a-drawer
        width="50%"
        title="导购转链配置"
        placement="right"
        :open="dgDrawerShow"
        @close="
          () => {
            dgDrawerShow = false
          }
        "
      >
        <template #extra>
          <a-button
            style="margin-right: 8px"
            @click="
              () => {
                dgDrawerShow = false
              }
            "
            >取消</a-button
          >
          <a-button type="primary" @click="addItemDg">提交</a-button>
        </template>
        <a-form
          ref="formRefDg"
          :model="FormStateDg"
          :rules="FormRuleDg"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-form-item label="名称" has-feedback required name="title">
            <a-input v-model:value="FormStateDg.title" placeholder="请输入名称" />
          </a-form-item>
          <a-form-item has-feedback required label="请选择回复类别">
            <a-radio-group v-model:value="FormStateDg.type" name="type">
              <a-radio key="text" value="text">文本</a-radio>
              <a-radio key="pic" value="pic" :disabled="FormStateDg.content_type == 'ecapi'"
                >图片</a-radio
              >
              <a-radio key="tuwen" value="tuwen">图文</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item has-feedback required label="回复内容来源">
            <a-radio-group v-model:value="FormStateDg.content_type" name="content_type">
              <a-radio key="ecapi" value="ecapi">柠聚开发平台（喵有券）</a-radio>
              <a-radio key="api" value="api">API获取</a-radio>
            </a-radio-group>
            <a-tooltip placement="top">
              <template #title>
                <span>查看区别及使用方式</span>
              </template>
              <a
                href="http://doc.21ds.cn/detail?doc=4731341806141859/4754829528050107"
                target="_blank"
                rel="noopener noreferrer"
                title="查看区别及使用方式"
                style="margin-left: 5px"
              >
                <question-circle-outlined />
              </a>
            </a-tooltip>
          </a-form-item>
          <a-form-item
            v-if="FormStateDg.content_type == 'ecapi'"
            has-feedback
            required
            label="Apkey"
          >
            <a-input v-model:value="FormStateDg.ecapi_apkey" placeholder="请输入喵有券平台Apkey" />
          </a-form-item>
          <a-form-item
            v-if="FormStateDg.content_type == 'ecapi'"
            has-feedback
            required
            label="淘宝账户名"
          >
            <a-input
              v-model:value="FormStateDg.ecapi_tbname"
              placeholder="请输入在喵有券平台授权的淘宝账户名"
            />
          </a-form-item>
          <a-form-item
            v-if="FormStateDg.content_type == 'ecapi'"
            has-feedback
            required
            label="淘宝PID"
          >
            <a-input
              v-model:value="FormStateDg.ecapi_tbpid"
              placeholder="请输入淘宝联盟中的任意可用PID"
            />
          </a-form-item>
          <a-form-item
            v-if="FormStateDg.content_type == 'ecapi'"
            has-feedback
            required
            label="京东联盟调用key"
          >
            <a-input
              v-model:value="FormStateDg.ecapi_jd_key_id"
              placeholder="请输入京东联盟调用key，为J开头的字符串"
            />
          </a-form-item>
          <a-form-item
            v-if="FormStateDg.content_type == 'api'"
            has-feedback
            required
            label="API接口地址"
          >
            <a-textarea
              v-model:value="FormStateDg.content"
              show-count
              placeholder="请输入API接口地址"
            />
          </a-form-item>
        </a-form>
      </a-drawer>
    </a-drawer>
    <a-drawer
      width="45%"
      title="自定义菜单"
      placement="right"
      :open="menuDrawerShow"
      @close="
        () => {
          menuDrawerShow = false
        }
      "
    >
      <template #extra>
        <a-tooltip placement="top">
          <template #title>
            <span>刷新列表</span>
          </template>
          <a-button @click="reloadListMenu">
            <template #icon><SyncOutlined /></template>
          </a-button>
        </a-tooltip>
        <a-button
          v-permission="{ action: 'mp_menu_add' }"
          type="primary"
          style="margin-left: 12px"
          @click="mpweixin_menu_add"
        >
          <template #icon><PlusOutlined /></template> 新增菜单
        </a-button>
        <a-tooltip v-permission="{ action: 'mp_menu_push' }" placement="top">
          <template #title>
            <span>将自定义菜单设置推送至微信</span>
          </template>
          <a-button type="primary" style="margin-left: 12px" @click="mp_menu_push">
            推送至微信
          </a-button>
        </a-tooltip>
        <a-tooltip v-permission="{ action: 'mp_menu_push_delete' }" placement="top">
          <template #title>
            <span>将公众号中现有菜单全部删除</span>
          </template>
          <a-button type="primary" style="margin-left: 12px" danger @click="mp_menu_push_delete">
            删除公众号菜单
          </a-button>
        </a-tooltip>
      </template>
      <a-table
        :columns="columnsMenu"
        :rowKey="(record) => record.id"
        :dataSource="menuDataList"
        :loading="menuLoading"
        :pagination="false"
        @change="handleTableChangeMenu"
      >
        <template #status="{ text: record }">
          <a-tag v-if="record == 1" color="blue">正常</a-tag>
          <a-tag v-if="record == -1" color="red">禁用</a-tag>
        </template>
        <template #action="{ text: record }">
          <a v-permission="{ action: 'mp_menu_add' }" @click="mpweixin_menu_edit(record)"
            ><EditOutlined /> 编辑</a
          >
          <a-divider v-permission="{ action: 'mp_menu_ext' }" type="vertical" />
          <a-dropdown>
            <a v-permission="{ action: 'mp_menu_ext' }" class="ant-dropdown-link">
              更多 <DownOutlined
            /></a>
            <template #overlay>
              <a-menu>
                <a-menu-item v-permission="{ action: 'mp_menu_copy' }">
                  <a @click="mp_menu_copy(record)"><CopyOutlined /> 复用</a>
                </a-menu-item>
                <a-menu-item v-permission="{ action: 'mp_menu_del' }" style="color: red">
                  <a @click="mp_menu_delete(record)"><DeleteOutlined /> 删除</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </a-table>
      <a-drawer
        width="45%"
        title="自定义菜单详情"
        placement="right"
        :open="menuEditDrawerShow"
        @close="
          () => {
            menuEditDrawerShow = false
          }
        "
      >
        <template #extra>
          <a-button
            style="margin-right: 8px"
            @click="
              () => {
                menuEditDrawerShow = false
              }
            "
            >取消</a-button
          >
          <a-button type="primary" @click="addItemMenu">提交</a-button>
        </template>
        <a-form
          ref="formRefMenu"
          :model="FormStateMenu"
          :rules="FormRuleMenu"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-form-item label="上级菜单" has-feedback required name="pid">
            <a-select v-model:value="FormStateMenu.pid" placeholder="请选择上级菜单">
              <a-select-option key="0" value="0">一级菜单</a-select-option>
              <a-select-option v-for="d in allMenuData" :key="d._id" :value="d._id">
                {{ d.title }} {{ d.status == 1 ? '(正常)' : '(禁用)' }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="菜单名称" has-feedback required name="title">
            <a-input v-model:value="FormStateMenu.title" placeholder="请输入名称" />
          </a-form-item>
          <a-form-item has-feedback required label="响应动作类型">
            <a-radio-group v-model:value="FormStateMenu.type" name="type">
              <a-radio key="click" value="click">点击推事件</a-radio>
              <a-radio key="view" value="view">网址</a-radio>
              <a-radio key="scancode_push" value="scancode_push">扫码</a-radio>
              <a-radio key="scancode_waitmsg" value="scancode_waitmsg"
                >扫码(带消息接收中提示)</a-radio
              >
              <a-radio key="location_select" value="location_select">地理位置</a-radio>
              <a-radio key="miniprogram" value="miniprogram">小程序</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-if="FormStateMenu.type == 'click'" label="Key值" name="click_key">
            <a-input
              v-model:value="FormStateMenu.click_key"
              placeholder="菜单 KEY 值，用于消息接口推送，不超过128字节"
            />
          </a-form-item>
          <a-form-item v-if="FormStateMenu.type == 'miniprogram'" label="小程序APPID" name="appid">
            <a-input v-model:value="FormStateMenu.appid" placeholder="小程序APPID" />
          </a-form-item>
          <a-form-item
            v-if="FormStateMenu.type == 'miniprogram'"
            label="小程序的页面路径"
            name="pagepath"
          >
            <a-input v-model:value="FormStateMenu.pagepath" placeholder="小程序的页面路径" />
          </a-form-item>
          <a-form-item
            v-if="FormStateMenu.type == 'view' || FormStateMenu.type == 'miniprogram'"
            label="链接"
            name="url"
          >
            <a-input
              v-model:value="FormStateMenu.url"
              placeholder="网页/小程序链接，当响应动作类型为小程序时，不支持小程序的老版本客户端将打开本url。"
            />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="排序"
            has-feedback
            required
            name="sort"
          >
            <a-input v-model:value="FormStateMenu.sort" placeholder="请输入序号(值越大越靠前)" />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="状态"
            has-feedback
            required
            name="status"
          >
            <a-radio-group v-model:value="FormStateMenu.status" name="status">
              <a-radio :key="-1" :value="-1">禁用</a-radio>
              <a-radio :key="1" :value="1">正常</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
      </a-drawer>
    </a-drawer>
    <a-drawer
      width="45%"
      title="网页授权"
      placement="right"
      :open="oauthDrawerShow"
      @close="
        () => {
          oauthDrawerShow = false
        }
      "
    >
      <a-alert
        message="需要先将`21ds.cn`添加到微信公众号的“网页授权域名”中，路径：登录微信公众号平台-接口权限-网页授权-“修改”-网页授权域名"
        type="info"
        show-icon
        style="margin-bottom: 27px"
      />
      <a-form :model="FormStateOauth" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="授权后跳转地址" has-feedback required name="url">
          <a-textarea
            v-model:value="FormStateOauth.url"
            placeholder="请输入授权后跳转Url地址，如：http://www.21ds.cn"
            :rows="3"
          />
        </a-form-item>
        <a-form-item has-feedback required label="授权类型">
          <a-radio-group v-model:value="FormStateOauth.type" name="type">
            <a-radio key="snsapi_base" value="snsapi_base">用户openid(静默授权)</a-radio>
            <a-radio key="snsapi_userinfo" value="snsapi_userinfo">用户基本信息</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="网页授权链接">
          <a-textarea
            v-model:value="FormStateOauth.oauth_url"
            placeholder="输入上述参数后将自动生成"
            :rows="2"
            readonly
            @click="copyData(FormStateOauth.oauth_url)"
          />
        </a-form-item>
      </a-form>
    </a-drawer>
    <a-drawer
      width="45%"
      title="公众号详情"
      placement="right"
      :open="drawerShow"
      @close="
        () => {
          drawerShow = false
        }
      "
    >
      <template #extra>
        <a-button
          style="margin-right: 8px"
          @click="
            () => {
              drawerShow = false
            }
          "
          >取消</a-button
        >
        <a-button type="primary" @click="addItem">提交</a-button>
      </template>
      <a-form
        ref="formRef"
        :model="FormState"
        :rules="FormRule"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-form-item label="名称" has-feedback required name="title">
          <a-input v-model:value="FormState.title" placeholder="请输入名称" />
        </a-form-item>
        <a-form-item has-feedback required label="AppId">
          <a-input v-model:value="FormState.app_id" show-count placeholder="请输入AppId" />
        </a-form-item>
        <a-form-item has-feedback required label="AppSecret">
          <a-input-password v-model:value="FormState.app_secret" placeholder="请输入AppSecret" />
        </a-form-item>
        <a-form-item has-feedback required label="Token">
          <a-input v-model:value="FormState.token" show-count placeholder="请输入Token">
            <template #suffix>
              <a-tooltip title="随机生成"> <a @click="randomGen">随机生成</a> </a-tooltip>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item has-feedback required label="消息加解密密钥">
          <a-textarea
            v-model:value="FormState.aes"
            show-count
            placeholder="请输入消息加解密密钥(EncodingAESKey)"
          />
        </a-form-item>
        <a-form-item has-feedback required label="消息加解密方式">
          <a-radio-group v-model:value="FormState.aes_type" name="expire">
            <a-radio key="ming" value="ming">明文模式</a-radio>
            <a-radio key="jianrong" value="jianrong">兼容模式</a-radio>
            <a-radio key="secure" value="secure">安全模式</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item has-feedback required label="SecretKey" name="server_secret">
          <a-input-search
            v-model:value="FormState.server_secret"
            placeholder="点击右侧“获取密钥”按钮进行获取"
            enter-button="获取密钥"
            @search="resetSecret"
          />
        </a-form-item>
        <a-form-item label="事件通知API">
          <a-textarea
            v-model:value="FormState.event_url"
            style="margin-bottom: 5px"
            autosize
            placeholder="（可选）"
          />
          <TypographyText type="secondary"
            >注：事件通知API接口地址，用于接收所有事件通知，只通知到一个接口时可直接输入通知API接口地址，多个API时以“tag::url”格式输入并且以换行分隔，如：<br />21ds::http://www.21ds.cn<br />ecapi::http://www.ecapi.cn<br />当柠聚开发平台接收到微信事件通知时，会根据EventKey中的tag来识别通知哪个接口，如：EventKey=ecapi::123456789，将会以post请求发送123456789至http://www.ecapi.cn接口<br />如需接收EventKey不可自定义的事件通知，可以将tag标为default，如：default::http://www.ecmpay.cn，系统会将未匹配到的事件通知POST到http://www.ecmpay.cn接口</TypographyText
          >
        </a-form-item>
        <a-form-item has-feedback required label="启用状态">
          <a-radio-group v-model:value="FormState.status" name="status">
            <a-radio key="1" value="1">启用</a-radio>
            <a-radio key="0" value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="回调URL(不可修改)">
          <a-textarea
            v-if="FormState._id != undefined && FormState._id.length > 0"
            :value="'https://21ds.cn/mp_weixin/callback/' + FormState._id"
            placeholder="新增的公众号提交后此链接自动生成，不可修改"
            readonly
            @click="copyData('https://21ds.cn/mp_weixin/callback/' + FormState._id)"
          />
          <a-textarea v-else placeholder="新增的公众号提交后此链接自动生成" disabled />
        </a-form-item>
        <!-- <a-divider>以下数据实时生成，不存储</a-divider> -->
      </a-form>
    </a-drawer>
    <a-drawer
      width="60%"
      title="素材管理"
      placement="right"
      :open="mediaDrawerShow"
      @close="
        () => {
          mediaDrawerShow = false
        }
      "
    >
      <template #extra>
        <a-checkbox style="margin-right: 12px" @change="onCheckAllChange"> 选中全部 </a-checkbox>
        <a
          v-if="selectedImg.length > 0"
          style="color: red; margin-right: 12px"
          @click="mpweixin_media_delete"
        >
          <DeleteOutlined /> 删除选中
        </a>
        <a-tooltip placement="top">
          <template #title>
            <span>刷新列表</span>
          </template>
          <a-button @click="reloadListMedia">
            <template #icon>
              <SyncOutlined />
            </template>
          </a-button>
        </a-tooltip>
        <a-button
          v-permission="{ action: 'mpweixin_media_async' }"
          type="primary"
          style="margin-left: 12px"
          @click="mpweixin_media_async"
        >
          同步微信已有素材
        </a-button>
        <a-button
          v-permission="{ action: 'mpweixin_media_add' }"
          type="primary"
          style="margin-left: 12px"
          @click="mpweixin_media_add"
        >
          <template #icon>
            <PlusOutlined />
          </template>
          上传新素材
        </a-button>
      </template>
      <a-alert
        message="受微信公众平台限制，暂时仅可管理图片素材。"
        banner
        style="margin-bottom: 20px"
      />
      <a-spin tip="素材加载中……" :spinning="mediaLoading">
        <Empty
          v-if="mediaDataList.data == undefined || mediaDataList.data.length == 0"
          description="暂无素材，请先“同步微信已有素材”"
        />
        <div
          v-if="mediaDataList.data != undefined && mediaDataList.data.length > 0"
          class="imgListDiv"
        >
          <a-checkbox-group v-model:value="selectedImg">
            <template v-for="(item, index) in mediaDataList.data" :key="index">
              <a-checkbox :value="item._id" class="imgCheckBox" />
              <a-image :width="200" :height="200" :src="item.url" :title="item.media_id" />
            </template>
          </a-checkbox-group>
        </div>
        <a-divider />
        <div style="display: flex; justify-content: center">
          <a-pagination
            v-model:current="listQueryMedia.pageNo"
            v-model:pageSize="listQueryMedia.pageSize"
            :total="mediaDataList.totalCount"
            show-less-items
            @change="changeMediaPage"
          />
        </div>
      </a-spin>
      <a-drawer
        width="50%"
        title="素材上传"
        placement="right"
        :open="mediaAddDrawerShow"
        @close="
          () => {
            mediaAddDrawerShow = false
          }
        "
      >
        <a-alert
          message="上传非图片素材时，请及时自行保存素材ID（上传成功后显示），受微信平台限制，柠聚开发平台暂不存储非图片素材信息，请悉知。"
          banner
          style="margin-bottom: 20px"
        />
        <a-form
          ref="formRefKeyword"
          :model="FormStateMedia"
          :rules="FormRuleMedia"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-form-item has-feedback required label="素材类别">
            <a-radio-group v-model:value="FormStateMedia.type" name="type">
              <a-radio key="image" value="image">图片</a-radio>
              <a-radio key="voice" value="voice">语音</a-radio>
              <a-radio key="video" value="video">视频</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            v-if="FormStateMedia.type === 'video'"
            label="视频名称"
            has-feedback
            :required="FormStateMedia.type === 'video'"
            name="title"
          >
            <a-input v-model:value="FormStateMedia.title" placeholder="请输入视频名称" />
          </a-form-item>
          <a-form-item v-if="FormStateMedia.type != ''" has-feedback required label="素材">
            <a-upload
              name="file"
              listType="picture-card"
              class="avatar-uploader"
              :showUploadList="false"
              :data="FormStateMedia"
              :action="apiUrl + 'api/common/uploadToWeixin'"
              :headers="uploadHeaders"
              :beforeUpload="beforeUpload"
              @change="uploadChange"
            >
              <div>
                <loading-outlined v-if="uploadLoading" />
                <plus-outlined v-else />
                <div class="ant-upload-text">上传</div>
              </div>
            </a-upload>
          </a-form-item>
          <div v-if="uploadResult.media_id != undefined && uploadResult.media_id.length > 0">
            <a-alert message="上传成功" type="success" show-icon style="margin-bottom: 20px" />
            <a-form-item label="素材ID">
              <a-textarea
                :value="uploadResult.media_id"
                readonly
                @click="copyData(uploadResult.media_id)"
              />
            </a-form-item>
            <a-form-item label="素材URL">
              <a-textarea :value="uploadResult.url" readonly @click="copyData(uploadResult.url)" />
            </a-form-item>
          </div>
        </a-form>
      </a-drawer>
    </a-drawer>
    <a-modal v-model:open="selectMediaModalShow" width="60%" title="请选择素材" :footer="null">
      <a-spin tip="素材加载中……" :spinning="mediaLoading">
        <Empty
          v-if="mediaDataList.data == undefined || mediaDataList.data.length == 0"
          description="暂无素材，请先“同步微信已有素材”或“上传新素材”"
        />
        <div
          v-if="mediaDataList.data != undefined && mediaDataList.data.length > 0"
          class="imgListDiv"
        >
          <template v-for="(item, index) in mediaDataList.data" :key="index">
            <img
              :src="item.url"
              :title="item.media_id"
              width="200"
              height="200"
              style="cursor: pointer"
              @click="
                () => {
                  if (activeKey == '1') {
                    FormStateKeyword.content = item.media_id
                  } else {
                    FormStateSub.content = item.media_id
                  }
                  selectMediaModalShow = false
                }
              "
            />
          </template>
        </div>
        <a-divider />
        <div style="display: flex; justify-content: center">
          <a-pagination
            v-model:current="listQueryMedia.pageNo"
            v-model:pageSize="listQueryMedia.pageSize"
            :total="mediaDataList.totalCount"
            show-less-items
            @change="changeMediaPage"
          />
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw, watch } from 'vue'
import {
  Row,
  Col,
  Modal,
  Divider,
  Drawer,
  Card,
  Tooltip,
  Statistic,
  RadioGroup,
  RangePicker,
  Tag,
  ImagePreviewGroup,
  Image,
  Upload,
  Empty,
  Pagination,
  TypographyText,
  Spin
} from 'ant-design-vue'
import {
  SyncOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  DownOutlined,
  CopyOutlined,
  QuestionCircleOutlined,
  LoadingOutlined
} from '@ant-design/icons-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import {
  delArtItem,
  getItemList,
  editData,
  getKeywordLists,
  getSubLists,
  getDgLists,
  getMediaLists,
  getMenuLists,
  editDataKeyword,
  editDataSub,
  editDataDg,
  delKeywordItem,
  asyncMedia,
  delMediaItem,
  useReplyContent,
  useReplyContentDg,
  delDgItem,
  pushMenuWeixin,
  deleteMenuWeixin,
  editDataMenu,
  getAllMenu,
  delMenuItem,
  delSubItem
} from '@/api/mpweixin'
import { useRouter } from 'vue-router'
import { apiUrl, copyText, randomString } from '@/utils/common'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { storage } from '@/utils/Storage'

export default defineComponent({
  name: 'MpList',
  components: {
    Empty,
    SyncOutlined,
    PlusOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    DownOutlined,
    QuestionCircleOutlined,
    CopyOutlined,
    LoadingOutlined,
    DeleteOutlined,
    TypographyText,
    [Tag.name]: Tag,
    [Row.name]: Row,
    [Spin.name]: Spin,
    [Card.name]: Card,
    [Upload.name]: Upload,
    [ImagePreviewGroup.name]: ImagePreviewGroup,
    [Image.name]: Image,
    [Tooltip.name]: Tooltip,
    [RadioGroup.name]: RadioGroup,
    [RangePicker.name]: RangePicker,
    [Divider.name]: Divider,
    [Statistic.name]: Statistic,
    [Drawer.name]: Drawer,
    [Pagination.name]: Pagination,
    [Col.name]: Col
  },
  setup() {
    const formRef = ref()
    const formRefDg = ref()
    const formRefKeyword = ref()
    const formRefSub = ref()
    const formRefMenu = ref()
    const router = useRouter()
    const state = reactive<any>({
      loading: true,
      keywordLoading: true,
      subLoading: true,
      mediaLoading: true,
      menuLoading: true,
      selectMediaModalShow: false,
      drawerShow: false,
      replyDrawerShow: false,
      oauthDrawerShow: false,
      mediaAddDrawerShow: false,
      menuEditDrawerShow: false,
      dgLoading: true,
      keywordDrawerShow: false,
      subDrawerShow: false,
      menuDrawerShow: false,
      dgDrawerShow: false,
      mediaDrawerShow: false,
      uploadHeaders: {},
      uploadResult: {},
      uploadLoading: false,
      apiUrl: apiUrl(),
      selectedImg: [],
      pageAllMedia: [],
      dataList: [],
      menuDataList: [],
      allMenuData: [],
      dgDataList: [],
      mediaDataList: [],
      keywordDataList: [],
      subDataList: [],
      select_mw_id: '',
      activeKey: ref('1'),
      listQuery: {
        pageNo: 1,
        pageSize: 15,
        title: ''
      },
      listQueryMedia: {
        pageNo: 1,
        pageSize: 15,
        mw_id: ''
      },
      listQueryMenu: {
        mw_id: ''
      },
      listQueryKeyword: {
        pageNo: 1,
        pageSize: 15,
        mw_id: '',
        title: ''
      },
      listQueryDg: {
        pageNo: 1,
        pageSize: 15,
        mw_id: '',
        title: ''
      },
      listQuerySub: {
        pageNo: 1,
        pageSize: 15,
        mw_id: '',
        title: ''
      },
      pagination: {
        pageSizeOptions: ['15', '30', '50'],
        showSizeChanger: true,
        total: 1,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSize: 15,
        current: 1
      },
      keywordpagination: {
        pageSizeOptions: ['15', '30', '50'],
        showSizeChanger: true,
        total: 1,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSize: 15,
        current: 1
      },
      subpagination: {
        pageSizeOptions: ['15', '30', '50'],
        showSizeChanger: true,
        total: 1,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSize: 15,
        current: 1
      },
      dgpagination: {
        pageSizeOptions: ['15', '30', '50'],
        showSizeChanger: true,
        total: 1,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSize: 15,
        current: 1
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      columnsSub: [
        {
          title: '回复内容/API接口地址',
          slots: { customRender: 'content' }
        },
        {
          title: '内容来源',
          dataIndex: 'content_type',
          slots: { customRender: 'content_type' }
        },
        {
          title: '是否启用',
          slots: { customRender: 'is_use' }
        },
        {
          title: '创建时间',
          dataIndex: 'create_time'
        },
        {
          title: '操作',
          width: '150px',
          slots: { customRender: 'action' }
        }
      ],
      columnsDg: [
        {
          title: '标题',
          dataIndex: 'title'
        },
        {
          title: '回复类别',
          slots: { customRender: 'content' }
        },
        {
          title: '内容来源',
          dataIndex: 'content_type',
          slots: { customRender: 'content_type' }
        },
        {
          title: '是否启用',
          slots: { customRender: 'is_use' }
        },
        {
          title: '创建时间',
          dataIndex: 'create_time'
        },
        {
          title: '操作',
          width: '150px',
          slots: { customRender: 'action' }
        }
      ],
      columnsMenu: [
        {
          title: '菜单名',
          dataIndex: 'title'
        },
        {
          title: '动作类型',
          dataIndex: 'type'
        },
        {
          title: '排序',
          dataIndex: 'sort'
        },
        {
          title: '创建时间',
          dataIndex: 'create_time'
        },
        {
          title: '操作',
          width: '150px',
          slots: { customRender: 'action' }
        }
      ],
      columnsKeyword: [
        {
          title: '关键字',
          dataIndex: 'keyword_arr',
          slots: { customRender: 'keyword_arr' }
        },
        {
          title: '回复内容/API接口地址',
          slots: { customRender: 'content' }
        },
        {
          title: '内容来源',
          dataIndex: 'content_type',
          slots: { customRender: 'content_type' }
        },
        {
          title: '创建时间',
          dataIndex: 'create_time'
        },
        {
          title: '操作',
          width: '150px',
          slots: { customRender: 'action' }
        }
      ],
      columns: [
        {
          title: 'ID',
          dataIndex: '_id'
        },
        {
          title: '公众号AppId',
          dataIndex: 'app_id'
        },
        {
          title: '名称',
          dataIndex: 'title'
        },
        {
          title: '状态',
          dataIndex: 'status',
          slots: { customRender: 'status' }
        },
        {
          title: '创建时间',
          dataIndex: 'create_time'
        },
        {
          title: '操作',
          slots: { customRender: 'action' },
          width: '450px'
        }
      ]
    })
    onMounted(() => {
      getDataList()
    })
    const FormStateOauth = reactive<any>({
      url: '',
      appid: '',
      mw_id: '',
      oauth_url: '',
      type: ''
    })
    const FormStateMenu = reactive<any>({
      _id: '',
      mw_id: '',
      title: '',
      type: '',
      click_key: '',
      pagepath: '',
      url: '',
      pid: '',
      sort: '',
      status: '',
      appid: ''
    })
    const FormRuleMenu = {
      title: [{ required: true, message: '请输入菜单名称', trigger: ['blur', 'change'] }],
      mw_id: [{ required: true, message: '请输入必要信息', trigger: ['blur', 'change'] }],
      type: [{ required: true, message: '请选择响应动作类型', trigger: ['blur', 'change'] }]
    }
    const FormStateDg = reactive<any>({
      _id: '',
      mw_id: '',
      title: '',
      type: '',
      content_type: '',
      ecapi_apkey: '',
      content: '',
      ecapi_tbname: '',
      ecapi_tbpid: ''
    })
    const FormRuleDg = {
      title: [{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }],
      mw_id: [{ required: true, message: '请输入必要信息', trigger: ['blur', 'change'] }],
      content_type: [{ required: true, message: '请选择回复方式', trigger: ['blur', 'change'] }],
      content: [
        {
          required: FormStateDg.content_type == 'api',
          message: '请输入API接口地址',
          trigger: ['blur', 'change']
        }
      ],
      type: [
        {
          required: true,
          message: '请选择',
          trigger: ['blur', 'change']
        }
      ],
      ecapi_apkey: [
        {
          required: FormStateDg.content_type == 'ecapi',
          message: '请输入喵有券Apkey',
          trigger: ['blur', 'change']
        }
      ],
      ecapi_tbname: [
        {
          required: FormStateDg.content_type == 'ecapi',
          message: '请输入在喵有券授权的淘宝账户名',
          trigger: ['blur', 'change']
        }
      ],
      ecapi_tbpid: [
        {
          required: FormStateDg.content_type == 'ecapi',
          message: '请输入淘宝账户中任意一个可用PID',
          trigger: ['blur', 'change']
        }
      ]
    }
    watch(
      () => state.activeKey,
      () => {
        if (state.activeKey == 1) {
          state.listQueryKeyword.pageNo = 1
          state.listQueryKeyword.title = ''
          getKeywordList()
        } else if (state.activeKey == 2) {
          state.listQuerySub.pageNo = 1
          state.listQuerySub.title = ''
          getSubList()
        } else {
          state.listQueryDg.pageNo = 1
          state.listQueryDg.title = ''
          getDgList()
        }
      }
    )
    watch(
      () => FormStateOauth.mw_id,
      () => {
        grenralOauthUrl()
      }
    )
    watch(
      () => FormStateOauth.url,
      () => {
        grenralOauthUrl()
      }
    )
    watch(
      () => FormStateOauth.type,
      () => {
        grenralOauthUrl()
      }
    )
    function grenralOauthUrl() {
      FormStateOauth.oauth_url =
        'https://21ds.cn/mp_weixin/oauth?mw_id=' +
        FormStateOauth.mw_id +
        '&scope=' +
        FormStateOauth.type +
        '&redirect_uri=' +
        encodeURIComponent(FormStateOauth.url)
    }
    function getKeywordList() {
      getKeywordLists(state.listQueryKeyword).then((res) => {
        state.keywordDataList = res
        state.keywordLoading = false
      })
    }
    function getDgList() {
      getDgLists(state.listQueryDg).then((res) => {
        state.dgDataList = res
        state.dgLoading = false
      })
    }
    function onCheckAllChange(e) {
      state.selectedImg = e.target.checked ? state.pageAllMedia : []
    }
    function getSubList() {
      getSubLists(state.listQueryKeyword).then((res) => {
        state.subDataList = res
        state.subLoading = false
      })
    }

    const FormState = reactive<any>({
      _id: '',
      title: '',
      app_id: '',
      status: '1',
      token: '',
      aes: '',
      aes_type: '',
      app_secret: ''
    })
    const FormRule = {
      title: [{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }],
      app_secret: [{ required: true, message: '请输入AppSecret', trigger: ['blur', 'change'] }],
      token: [{ required: true, message: '请输入Token', trigger: ['blur', 'change'] }],
      aes: [{ required: true, message: '请输入消息加解密密钥', trigger: ['blur', 'change'] }],
      aes_type: [{ required: true, message: '请选择消息加解密方式', trigger: ['blur', 'change'] }],
      app_id: [{ required: true, message: '请输入AppId', trigger: ['blur', 'change'] }]
    }
    const FormStateKeyword = reactive<any>({
      _id: '',
      title: '',
      keyword_arr: '',
      need_sec_reply: '0',
      need_sec_msg: '',
      type: '',
      content_type: '',
      mw_id: '',
      content: '',
      reply_title: '',
      reply_pic: '',
      reply_desc: '',
      reply_url: ''
    })
    const FormStateMedia = reactive<any>({
      title: '',
      type: '',
      mw_id: ''
    })
    const FormRuleMedia = {
      title: [
        {
          required: FormStateMedia.type == 'video' ? true : false,
          message: '请输入标题',
          trigger: ['blur', 'change']
        }
      ],
      type: [{ required: true, message: '请选择素材类别', trigger: ['blur', 'change'] }]
    }
    const FormRuleKeyword = {
      title: [{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }],
      keyword: [
        { required: true, message: '请输入关键字，多个以英文,分割', trigger: ['blur', 'change'] }
      ],
      type: [{ required: true, message: '请选择回复类别', trigger: ['blur', 'change'] }],
      content_type: [
        { required: true, message: '请选择回复内容来源', trigger: ['blur', 'change'] }
      ],
      content: [
        {
          required: FormStateKeyword.type != 'tuwen' && FormStateKeyword.content_type == 'api',
          message: '请输入回复内容/API接口地址',
          trigger: ['blur', 'change']
        }
      ],
      reply_title: [
        {
          required:
            (FormStateKeyword.type == 'tuwen' || FormStateKeyword.type == 'video') &&
            FormStateKeyword.content_type == 'text',
          message: '请输入标题',
          trigger: ['blur', 'change']
        }
      ],
      reply_pic: [
        {
          required: FormStateKeyword.type == 'tuwen' && FormStateKeyword.content_type == 'text',
          message: '请输入图文封面图地址',
          trigger: ['blur', 'change']
        }
      ],
      reply_desc: [
        {
          required: FormStateKeyword.type == 'tuwen' && FormStateKeyword.content_type == 'text',
          message: '请输入图文描述',
          trigger: ['blur', 'change']
        }
      ],
      reply_url: [
        {
          required: FormStateKeyword.type == 'tuwen' && FormStateKeyword.content_type == 'text',
          message: '请输入图文链接',
          trigger: ['blur', 'change']
        }
      ]
    }
    const FormStateSub = reactive<any>({
      _id: '',
      title: '',
      content_type: '',
      mw_id: '',
      content: '',
      reply_title: '',
      reply_pic: '',
      reply_desc: '',
      reply_url: ''
    })
    const FormRuleSub = {
      title: [{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }],
      content_type: [{ required: true, message: '请选择回复方式', trigger: ['blur', 'change'] }],
      content: [
        {
          required: FormStateSub.type != 'tuwen' && FormStateSub.content_type == 'api',
          message: '请输入回复内容/API接口地址',
          trigger: ['blur', 'change']
        }
      ],
      reply_title: [
        {
          required:
            (FormStateSub.type == 'tuwen' || FormStateSub.type == 'video') &&
            FormStateSub.content_type == 'text',
          message: '请输入标题',
          trigger: ['blur', 'change']
        }
      ],
      reply_pic: [
        {
          required: FormStateSub.type == 'tuwen' && FormStateSub.content_type == 'text',
          message: '请输入图文封面图地址',
          trigger: ['blur', 'change']
        }
      ],
      reply_desc: [
        {
          required: FormStateSub.type == 'tuwen' && FormStateSub.content_type == 'text',
          message: '请输入图文描述',
          trigger: ['blur', 'change']
        }
      ],
      reply_url: [
        {
          required: FormStateSub.type == 'tuwen' && FormStateSub.content_type == 'text',
          message: '请输入图文链接',
          trigger: ['blur', 'change']
        }
      ]
    }

    function handleTableChange(e) {
      state.loading = true
      state.pagination.pageSize = e.pageSize
      state.listQuery.pageSize = e.pageSize
      state.listQuery.pageNo = e.current
      state.pagination.current = e.current
      getDataList()
    }
    function handleTableChangeKeyword(e) {
      state.keywordLoading = true
      state.keywordPagination.pageSize = e.pageSize
      state.listQueryKeyword.pageSize = e.pageSize
      state.listQueryKeyword.pageNo = e.current
      getKeywordList()
    }
    function handleTableChangeSub(e) {
      state.subLoading = true
      state.subPagination.pageSize = e.pageSize
      state.listQuerySub.pageSize = e.pageSize
      state.listQuerySub.pageNo = e.current
      getSubList()
    }
    function handleTableChangeDg(e) {
      state.dgLoading = true
      state.dgPagination.pageSize = e.pageSize
      state.listQueryDg.pageSize = e.pageSize
      state.listQueryDg.pageNo = e.current
      getDgList()
    }
    function handleTableChangeMenu(e) {
      state.menuLoading = true
      state.listQueryMenu.pageSize = e.pageSize
      state.listQueryMenu.pageNo = e.current
      getMenuList()
    }
    function changeMediaPage(e) {
      state.mediaLoading = true
      state.listQueryMedia.pageNo = e
      getMediaList()
    }

    function reloadList() {
      state.loading = true
      state.listQuery.pageNo = 1
      state.pagination.current = 1
      getDataList()
    }
    function reloadListKeyword() {
      state.keywordLoading = true
      state.listQueryKeyword.pageNo = 1
      getKeywordList()
    }
    function reloadListDg() {
      state.dgLoading = true
      state.listQueryDg.pageNo = 1
      getDgList()
    }
    function reloadListMedia() {
      state.mediaLoading = true
      state.listQueryMedia.pageNo = 1
      getMediaList()
    }
    function reloadListSub() {
      state.subLoading = true
      state.listQuerySub.pageNo = 1
      getSubList()
    }
    function reloadListMenu() {
      state.menuLoading = true
      state.listQueryMenu.pageNo = 1
      getMenuList()
    }
    function copyData(txt) {
      copyText(txt)
    }

    function searchSubmit() {
      state.loading = true
      state.listQuery.pageNo = 1
      state.pagination.current = 1
      getDataList()
    }
    function searchSubmitKeyword() {
      state.keywordLoading = true
      state.listQueryKeyword.pageNo = 1
      state.keywordpagination.current = 1
      getKeywordList()
    }
    function searchSubmitSub() {
      state.subLoading = true
      state.listQuerySub.pageNo = 1
      state.subpagination.current = 1
      getSubList()
    }
    function mpweixin_keyword_edit(res) {
      for (let item in FormStateKeyword) {
        FormStateKeyword[item] = ''
      }
      for (let item in res) {
        FormStateKeyword[item] = res[item]
      }
      state.keywordDrawerShow = true
    }
    function mpweixin_dg_edit(res) {
      for (let item in FormStateDg) {
        FormStateDg[item] = ''
      }
      for (let item in res) {
        FormStateDg[item] = res[item]
      }
      state.dgDrawerShow = true
    }
    function mpweixin_sub_edit(res) {
      for (let item in FormStateSub) {
        FormStateSub[item] = ''
      }
      for (let item in res) {
        FormStateSub[item] = res[item]
      }
      state.subDrawerShow = true
    }
    function mpweixin_menu_edit(res) {
      for (let item in FormStateMenu) {
        if (item != 'mw_id' && item != '_id') {
          FormStateMenu[item] = ''
        }
      }
      for (let item in res) {
        FormStateMenu[item] = res[item]
      }
      state.menuEditDrawerShow = true
    }
    function mp_menu_copy(res) {
      for (let item in FormStateMenu) {
        if (item != 'mw_id') {
          FormStateMenu[item] = ''
        }
      }
      for (let item in res) {
        if (item != '_id') {
          let copyTips = item == 'title' ? ' - 复制' : ''
          FormStateMenu[item] = res[item] + copyTips
        }
      }
      state.menuEditDrawerShow = true
    }
    function mpweixin_edit(res) {
      for (let item in FormState) {
        FormState[item] = ''
      }
      for (let item in res) {
        FormState[item] = res[item]
      }
      state.drawerShow = true
    }
    function mpweixin_auto_reply(res) {
      state.listQueryKeyword.mw_id = res._id
      FormStateKeyword.mw_id = res._id
      state.listQuerySub.mw_id = res._id
      FormStateSub.mw_id = res._id
      FormStateDg.mw_id = res._id
      state.listQueryDg.mw_id = res._id
      state.replyDrawerShow = true
      state.listQueryKeyword.pageNo = 1
      state.listQueryKeyword.title = ''
      getKeywordList()
    }
    function mpweixin_media(res) {
      state.listQueryMedia.mw_id = res._id
      FormStateMedia.mw_id = res._id
      state.mediaDrawerShow = true
      state.listQueryMedia.pageNo = 1
      getMediaList()
    }
    function mpweixin_menu(res) {
      state.listQueryMenu.mw_id = res._id
      FormStateMenu.mw_id = res._id
      state.select_mw_id = res._id
      state.menuDrawerShow = true
      state.listQueryMenu.pageNo = 1
      getMenuList()
      getAllMenu(state.listQueryMenu).then((res) => {
        console.log(res)
        state.allMenuData = res
      })
    }
    function mpweixin_oauth(res) {
      FormStateOauth.mw_id = res._id
      FormStateOauth.appid = res.app_id
      state.select_mw_id = res._id
      state.oauthDrawerShow = true
    }
    function getMediaList() {
      getMediaLists(state.listQueryMedia).then((res) => {
        state.mediaDataList = res
        state.pageAllMedia = res.allId
        state.mediaLoading = false
      })
    }
    function useReply(e) {
      useReplyContent({ id: e._id }).then((res) => {
        if (res.code === 200) {
          requestSuccess(res)
          state.subLoading = true
          getSubList()
        } else {
          requestFailed(res)
        }
      })
    }
    function mp_menu_push() {
      Modal.confirm({
        title: '确认将自定义菜单设置推送至微信？',
        onOk() {
          pushMenuWeixin(state.listQueryMenu).then((res) => {
            if (res.code === 200) {
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function mp_menu_push_delete() {
      Modal.confirm({
        title: '确认将公众号中现有菜单全部删除？',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          deleteMenuWeixin(state.listQueryMenu).then((res) => {
            if (res.code === 200) {
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function useReplyDg(e) {
      useReplyContentDg({ id: e._id }).then((res) => {
        if (res.code === 200) {
          requestSuccess(res)
          state.dgLoading = true
          getDgList()
        } else {
          requestFailed(res)
        }
      })
    }
    function getMenuList() {
      getMenuLists(state.listQueryMenu).then((res) => {
        state.menuDataList = res
        state.menuLoading = false
      })
    }
    function mpweixin_add() {
      for (let item in FormState) {
        FormState[item] = ''
      }
      state.drawerShow = true
    }
    function mpweixin_menu_add() {
      for (let item in FormStateMenu) {
        if (item != 'mw_id') {
          FormStateMenu[item] = ''
        }
      }
      state.menuEditDrawerShow = true
    }
    function mpweixin_keyword_add() {
      for (let item in FormStateKeyword) {
        if (item != 'mw_id') {
          FormStateKeyword[item] = ''
        }
      }
      state.keywordDrawerShow = true
    }
    function mpweixin_media_add() {
      state.mediaAddDrawerShow = true
    }
    function mpweixin_media_async() {
      asyncMedia(state.listQueryMedia).then((res) => {
        if (res.code === 200) {
          requestSuccess(res)
        } else {
          requestFailed(res)
        }
      })
    }
    function mpweixin_sub_add() {
      for (let item in FormStateSub) {
        if (item != 'mw_id') {
          FormStateSub[item] = ''
        }
      }
      state.subDrawerShow = true
    }
    function mpweixin_dg_add() {
      for (let item in FormStateDg) {
        if (item != 'mw_id') {
          FormStateDg[item] = ''
        }
      }
      state.dgDrawerShow = true
    }
    function mpweixin_dg_delete(data) {
      Modal.confirm({
        title: '确认删除此项?',
        content: '【' + data.title + '】',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          delDgItem({ id: data._id }).then((res) => {
            if (res.code === 200) {
              state.dgLoading = true
              reloadListDg()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function mp_menu_delete(data) {
      Modal.confirm({
        title: '确认删除此项?',
        content: '【' + data.title + '】',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          delMenuItem({ id: data._id }).then((res) => {
            if (res.code === 200) {
              state.menuLoading = true
              reloadListMenu()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }

    function getDataList() {
      getItemList(state.listQuery).then((res) => {
        state.loading = false
        state.dataList = res
        state.pagination.total = res.totalCount
      })
    }
    const addItem = () => {
      formRef.value
        .validate()
        .then(() => {
          editData(toRaw(FormState)).then((res) => {
            if (res.code === 200) {
              requestSuccess(res)
              formRef.value.resetFields()
              state.loading = true
              state.drawerShow = false
              reloadList()
            } else {
              requestFailed(res)
            }
          })
        })
        .catch(() => {
          return false
        })
    }
    const addItemDg = () => {
      formRefDg.value
        .validate()
        .then(() => {
          editDataDg(toRaw(FormStateDg)).then((res) => {
            if (res.code === 200) {
              requestSuccess(res)
              formRefDg.value.resetFields()
              state.dgLoading = true
              state.dgDrawerShow = false
              reloadListDg()
            } else {
              requestFailed(res)
            }
          })
        })
        .catch(() => {
          return false
        })
    }
    const addItemKeyword = () => {
      formRefKeyword.value
        .validate()
        .then(() => {
          editDataKeyword(toRaw(FormStateKeyword)).then((res) => {
            if (res.code === 200) {
              requestSuccess(res)
              formRefKeyword.value.resetFields()
              state.keywordLoading = true
              state.keywordDrawerShow = false
              reloadListKeyword()
            } else {
              requestFailed(res)
            }
          })
        })
        .catch(() => {
          return false
        })
    }
    const addItemSub = () => {
      formRefSub.value
        .validate()
        .then(() => {
          editDataSub(toRaw(FormStateSub)).then((res) => {
            if (res.code === 200) {
              requestSuccess(res)
              formRefSub.value.resetFields()
              state.subLoading = true
              state.subDrawerShow = false
              reloadListSub()
            } else {
              requestFailed(res)
            }
          })
        })
        .catch(() => {
          return false
        })
    }
    const addItemMenu = () => {
      formRefMenu.value
        .validate()
        .then(() => {
          editDataMenu(toRaw(FormStateMenu)).then((res) => {
            if (res.code === 200) {
              requestSuccess(res)
              formRefMenu.value.resetFields()
              state.menuLoading = true
              state.menuEditDrawerShow = false
              reloadListMenu()
            } else {
              requestFailed(res)
            }
          })
        })
        .catch(() => {
          return false
        })
    }
    function mpweixin_delete(data) {
      Modal.confirm({
        title: '确认删除此公众号?',
        content: '【' + data.title + '】',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          delArtItem({ id: data._id }).then((res) => {
            if (res.code === 200) {
              state.loading = true
              getDataList()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function mpweixin_keyword_delete(data) {
      Modal.confirm({
        title: '确认删除此关键字?',
        content: '【' + data.keyword + '】',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          delKeywordItem({ id: data._id }).then((res) => {
            if (res.code === 200) {
              state.keywordLoading = true
              reloadListKeyword()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function mpweixin_media_delete() {
      Modal.confirm({
        title: '确认删除此选中的全部素材?',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          delMediaItem({ id: state.selectedImg, mw_id: state.listQueryMedia.mw_id }).then((res) => {
            if (res.code === 200) {
              reloadListMedia()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function mpweixin_sub_delete(data) {
      Modal.confirm({
        title: '确认删除此回复?',
        content: '【' + data.content + '】',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          delSubItem({ id: data._id }).then((res) => {
            if (res.code === 200) {
              state.subLoading = true
              reloadListSub()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function uploadChange(info) {
      if (info.file.status === 'uploading') {
        state.uploadLoading = true
        return
      }
      if (info.file.status === 'done') {
        state.uploadResult = {}
        state.uploadLoading = false
        if (info.file.response.code == 200) {
          state.uploadResult = info.file.response.data
        } else {
          state.uploadResult = {}
          requestFailed(null, info.file.response.msg)
        }
      }
    }
    function beforeUpload() {
      state.uploadResult = {}
      const token = storage.get(ACCESS_TOKEN)
      if (token) {
        state.uploadHeaders['Authorization'] = 'Bearer ' + token + ':' + new Date().getTime() // 让每个请求携带token
      }
      return true
    }
    function randomGen() {
      let len = 32
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var maxPos = $chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      pwd.toLowerCase()
      FormState.token = pwd
    }
    function resetSecret() {
      FormState.server_secret = randomString(64)
    }
    return {
      ...toRefs(state),
      handleTableChange,
      handleTableChangeMenu,
      reloadList,
      mpweixin_keyword_delete,
      mpweixin_sub_delete,
      FormRuleKeyword,
      resetSecret,
      uploadChange,
      beforeUpload,
      reloadListSub,
      FormStateDg,
      FormRuleDg,
      FormStateKeyword,
      FormStateMedia,
      FormRuleMedia,
      FormStateSub,
      formRefMenu,
      FormRuleSub,
      reloadListKeyword,
      getMediaList,
      FormStateMenu,
      FormRuleMenu,
      reloadListMedia,
      searchSubmit,
      mpweixin_delete,
      mpweixin_keyword_add,
      handleTableChangeDg,
      mpweixin_media_delete,
      mpweixin_keyword_edit,
      onCheckAllChange,
      mpweixin_oauth,
      mpweixin_sub_edit,
      mpweixin_sub_add,
      mpweixin_media_add,
      mpweixin_menu_add,
      mpweixin_media,
      mpweixin_menu,
      addItemKeyword,
      mp_menu_push,
      addItemSub,
      addItemMenu,
      formRef,
      mpweixin_dg_add,
      mpweixin_dg_delete,
      formRefKeyword,
      formRefSub,
      handleTableChangeKeyword,
      handleTableChangeSub,
      mpweixin_add,
      searchSubmitKeyword,
      searchSubmitSub,
      useReplyDg,
      copyData,
      FormState,
      mpweixin_edit,
      mpweixin_menu_edit,
      FormStateOauth,
      mpweixin_dg_edit,
      mpweixin_auto_reply,
      changeMediaPage,
      mpweixin_media_async,
      useReply,
      addItem,
      formRefDg,
      mp_menu_copy,
      mp_menu_delete,
      reloadListDg,
      mp_menu_push_delete,
      addItemDg,
      reloadListMenu,
      FormRule,
      randomGen,
      router,
      getDataList
    }
  }
})
</script>

<style>
.imgListDiv .ant-image-img {
  width: 200px;
  height: 200px;
}

.imgListDiv .ant-image {
  margin: 0px 15px 15px 0px;
}
.imgCheckBox {
  position: absolute;
  z-index: 99;
}
</style>
